<template>
	<view class="">
		<view class="pl-20 pr-20 bg-white pb-10 fsize-28 flex justify-between align-center">
			<view class="flex" v-if="otype!=='5'">
				<view 
					class="tabs-item" 
					:class="dateIndex===ix?'tabs-item-active':''"
					v-for="(im, ix) in tags" 
					:key="im.value"
					@click="onDate(im,ix)"
				>
				<text>{{im.label}}</text>
				</view>
			</view>
			<uni-icons
				custom-prefix="iconfont" 
				type="icon-excel" 
				size="32" 
				@click="onEx" 
				color="#13227a">
			</uni-icons>
		</view>
		<view class="my-list padding-0 mt-20">
			<u-list :height="swiperHeight" v-if="dataList.length > 0" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in dataList" :key="item.id">
					<view class="flex justify-between align-center bg-white padding-20 border-b" v-if="otype==='1'||otype==='2'">
						<text>{{item.memo}}</text>
						<text>{{item.money}}</text>
					</view>
					<view class="flex justify-between align-center bg-white padding-20 border-b" v-if="otype==='3'||otype==='4'">
						<view>
							<view>{{item.userName}}</view>
							<view class="mt-10 fsize-28 line-gray">{{item.remark}}</view>
						</view>
						<text>{{item.amount}}</text>
					</view>
					<view class="flex justify-between align-center bg-white padding-20 border-b" v-if="otype==='5'">
						<text>{{item.userName}}</text>
						<text>{{item.bonusBalance}}</text>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-empty mode="list" v-if="dataList.length === 0" />
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择日期范围"
		/>
	</view>
</template>

<script>	
	import listHeightMixin from '@/common/computedAltitude.js'
	import setDate from '@/common/date.js';
	import dwFile from '@/common/mixins/downloadFile.js'
	export default {
		mixins:[listHeightMixin, dwFile],
		data() {
			return {
				dateIndex: 0,
				otype: '',
				tags: [
					{label:'今天',value: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`},
					{label:'昨日',value: `${setDate.getDate(-1)} 到 ${setDate.getDate(0)}`},
					{label:'近七日',value:`${setDate.getDate(-7)} 到 ${setDate.getDate(0)}`},
					{label:'本月',value:`${setDate.getCurrentMonth().startDate} 到 ${setDate.getCurrentMonth().endDate}`},
					{label:'自定义',value:999}
				],
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				apiads:'',
				showCalendar: false,
				loadMore: false,
				dataList:[],
				searchData:{
					createTime: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`,
					page: 1,
					limit: 20
				},
			}
		},
		
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title:opt.title
			})
			this.otype = opt.type
			this.getPageList(this.otype);
		},
		methods: {
			onEx(){
				switch(this.otype){
					case "1":
						this.onExcel(this.apiads, {createTime: this.searchData.createTime, type: 1})
					break;
					case "2":
						this.onExcel(this.apiads, {createTime: this.searchData.createTime, type: 6})
					break;
					case "3":
						this.onExcel(this.apiads, {createTime: this.searchData.createTime, direction: -1})
					break;
					case "4":
						this.onExcel(this.apiads, {createTime: this.searchData.createTime, direction: 1})
					break;
				}
			},
			confirmDate(dates){
				this.sdate = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
				this.searchData.createTime = `${dates[0]} 到 ${dates[dates.length-1]}`
				this.tags[4].label = this.sdate
				this.showCalendar = false
				this.dataList = []
				this.searchData.page = 1
				this.getPageList(this.otype)
			},
			onDate(im, ix){
				if(this.dateIndex === ix && this.dateIndex !== 4) return 
				this.dateIndex = ix
				if(ix === 4){
					this.showCalendar = true
				}else {
					this.tags[4].label = '自定义'
					this.searchData.createTime = im.value
					this.dataList = []
					this.searchData.page = 1
					this.getPageList(this.otype)
				}
			},
			getPageList(type){
				switch(type){
					case "1":
						this.apiads = 'UserBalanceGetPageList'
						this.searchData.type = 1
						this.getpl()
					break;
					case "2":
						this.apiads = 'UserBalanceGetPageList'
						this.searchData.type = 6
						this.getpl()
					break;
					case "3":
						this.apiads = 'StoreStaffStockGetPageList'
						this.searchData.direction = -1
						this.getpl()
					break;
					case "4":
						this.apiads = 'StoreStaffStockGetPageList'
						this.searchData.direction = 1
						this.getpl()
					break;
					case "5":
						this.apiads = 'StockHolderGetPageList'
						this.getpl()
					break;
				}
				
			},
			getpl(){
				this.$reqPost(this.apiads, this.searchData).then(res=>{
					this.total = res.count
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.searchData.page++
						this.loadMore = true
					}else {
						this.loadMore = false
					}
				})
			},
			scrolltolower(){
				if(this.loadMore){
					this.getPageList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs-item{
	padding:8rpx 12rpx;
	&-active{
		background-color:#e54d42;
		color:#fff;
	}
}
</style>
